<!DOCTYPE html>
<html>
        <head>
                <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>BDMap Sample</title>
                <style type="text/css">
                        html{height:100%}
                        body{height:100%;margin:0px;padding:0px}
                        #container{height:100%}
                </style>
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=l6kwGsDiRWk3AP7vvcBGGxaMHQVwIjO6&s=1"></script>
                <script type="text/javascript" src="qwebchannel.js"></script> <!-- 与qt交互 -->
        </head>

        <body>
<!--<p>My cat is very grumpy</p>-->
                <div id="container"></div>

                <script type="text/javascript">
                 window.onload = function() {
                        var globalLng;
                        var globalLat;
                        var ovalS;
                        var Doa = 10;
                        var stationMarker;
                        var mk1;
            //var stationIcon = new BMap.Icon("jz16x16.png", new BMap.Size(16,16));
                        var map = new BMap.Map("container");           // 创建地图实例
                        var point = new BMap.Point(112.960966,28.334763);   // 创建点坐标
                        map.centerAndZoom(point, 12);                    // 初始化地图，设置中心点坐标和地图级别
            map.addControl(new BMap.NavigationControl());
                        map.setMapStyle({style:'dark'});
                        map.enableScrollWheelZoom(true);                 // 设置滚轮缩放
                        // map.setMapType(BMAP_EARTH_MAP);                  // 设置地图样式，地球模式
                        // 创建标点
                        // var point = new BMapGL.Point(113.557892, 34.8333);
                        // var marker = new BMapGL.Marker(point);        // 创建标注
                        // map.addOverlay(marker);                     // 将标注添加到地图中

                        // var opts = {
                        // 	width: 250,     // 信息窗口宽度
                        // 	height: 100,    // 信息窗口高度
                        // 	title: "New Marker"  // 信息窗口标题
                        // }
                        // var infoWindow = new BMapGL.InfoWindow("Marker", opts);  // 创建信息窗口对象
                        // marker.addEventListener("click", function(){                    // 标点添加点击事件
                        // 	map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口
                        // });

            // var map = initMap({
            //     tilt: 60,
            //     heading: 0,
            //     center: [116.389756,39.852666],
            //     zoom: 11,
            //     style: purpleStyle
            // });

            // var view = new mapvgl.View({
            //     map: map
            // });

            // var data = [{
            //     geometry: {
            //         type: 'Point',
            //         coordinates: [116.389756, 39.852666]
            //     },
            //     properties: {
            //         count: 100
            //     }
            // }];

            // var fanLayer = new mapvgl.FanLayer({
            //     color: '#009900',
            //     data: data,
            //     size: function (data) {
            //         return data.properties.count * 200;
            //     }
            // });
            // view.addLayer(fanLayer);
            // 渲染一个固定角度
                        // 画离线地图
                        let radian1 = 90 - Doa - 2;
            let radian2 = 90 - Doa;
                        if(ovalS!=null){
                                map.removeOverlay(ovalS);
                        }
                        ovalS = new BMap.Polygon(sector(new BMap.Point(112.960966,28.334763), 1000, radian1, radian2), {
                                strokeColor: 'red', // 边线颜色
                                strokeWeight: 1, // 边线的宽度，以像素为单位
                                strokeOpacity: 0.5, // 边线透明度，取值范围0 - 1
                                fillColor: 'red', // 填充颜色
                                fillOpacity: 0.5 // 透明度
                        })
                        map.addOverlay(ovalS)
                        /****************************/
                        // // 自动定位
                        // var geolocation = new BMap.Geolocation();
                        // geolocation.getCurrentPosition(function(r){console.log(r.point)
                        // 	if(this.getStatus() == BMAP_STATUS_SUCCESS){
                        // 		// var mk = new BMap.Marker(r.point);
                        // 		// map.addOverlay(mk);//标出所在地
                        // 		// map.panTo(r.point);//地图中心移动
                        // 		//alert('您的位置：'+r.point.lng+','+r.point.lat);
                        // 		lng=r.point.lng;
                        // 		lat=r.point.lat;
                        // 		let tempPoint =new BMap.Point(lng,lat);
                        // 		const convertor = new BMap.Convertor();
                        // 		convertor.translate([tempPoint], 1, 5,function(resPoint) {
                        // 			if(resPoint && resPoint.points && resPoint.points.length>0){
                        // 				lng = resPoint.points[0].lng;
                        // 				lat = resPoint.points[0].lat;
                        // 			}
                        // 			const point1 = new BMap.Point(lng, lat);
                        // 			const geo = new BMap.Geocoder();
                        // 			geo.getLocation(point1, (res) => {
                        // 				if(mk1!=null){
                        // 					map.removeOverlay(mk1);
                        //     			}
                        // 				mk1  = new BMap.Marker(point1);
                        //     			map.addOverlay(mk1);//标出所在地
                        // 			});
            //         });
                        // 	}else {
                        // 		alert('failed'+this.getStatus());
                        // 	}
                        // },{enableHighAccuracy: true})


           /*****************************/
                        // qt交互注册
                        // new QWebChannel(qt.webChannelTransport,
                        // 	function(channel){
                        // 		window.JSInterface = channel.objects.JSInterface; // 注册
                        // 	}
                        // );
            // // 基站设置
                        // function myMarker(lng,lat){
                        // 	var newpoint=new BMap.Point(lng,lat);
                        // 	if (stationMarker != null){
            //         map.removeOverlay(stationMarker);
            //     }
                        // 	stationMarker = new BMap.Marker(newpoint, {
            //         icon: stationIcon
            //     });        // 创建标注
                        // 	map.addOverlay(stationMarker);
                        // };
          /******************************/
                        /**
                         * @param point 原点
                         * @param radius 半径 米
                         * @param SRadian 开始弧度
                         * @param ERadian 结束弧度
                         * */
                    function sector(point, radius, SRadian, ERadian) {
                                var points = [] // 创建构成多边形的点数组
                                points.push(point) // 起点
                                // 根据弧度 计算扇形点 分布
                                var step = (ERadian - SRadian) / 15 || 15

                                for (var i = SRadian; i < ERadian + 0.001; i += step) {
                                        // 循环 获取 圆弧上点的坐标
                                        points.push(EOffsetBearing(point, radius, i))
                                }
                                // 连接起点
                                points.push(point)
                                middlePoint = points[points.length/2]
                                middlePoint =  new BMap.Point(middlePoint.lng - 0.0004, middlePoint.lat-0.001)
                                return points
                        }
                                /**
                                 * @param point 原点
                                 * @param dist 半径
                                 * @param bearing 计数
                                 * */
                        function EOffsetBearing(point, dist, bearing) {
                                // 计算1经度与原点的距离
                                var lngConv = map.getDistance(point, new BMap.Point(point.lng + 0.1, point.lat)) * 10
                                // 计算1纬度与原点的距离
                                var latConv = map.getDistance(point, new BMap.Point(point.lng, point.lat + 0.1)) * 10
                                // 正弦计算待获取的点的纬度与原点纬度差
                                var lat = (dist * Math.sin((bearing * Math.PI) / 180)) / latConv
                                // 余弦计算待获取的点的经度与原点经度差
                                var lng = (dist * Math.cos((bearing * Math.PI) / 180)) / lngConv
                                return new BMap.Point(point.lng + lng, point.lat + lat)
                        }
            }
        </script>
        </body>
</html>
